import React, { useEffect } from 'react';
import Environments from '@/platform/commons/utils/env-util';
import {
    Button, Form, Input, notification 
} from 'antd';
import DynamicIcon from '@/platform/components/dynamic-icon/DynamicIcon';
import SysApi from '@/platform/apis/sys-api';
import HttpResultUtils from '@/platform/commons/utils/http-result-util';
import SysStorageUtils from '@/platform/commons/utils/sys-storage-util';
import { useHistory } from 'react-router-dom';
import classes from './Login.module.less';

const Login:React.FC = () => {
    const history = useHistory();
    const [form] = Form.useForm();
    const sysTitle = Environments.getEvnProp('REACT_APP_SYS_TITLE') || '管理系统';

    useEffect(() => {
        form.setFieldsValue({
            userName: Environments.getEvnProp('REACT_APP_ADMIN_USER_NAME'),
            password: Environments.getEvnProp('REACT_APP_ADMIN_PASSWORD')
        });
    }, [form]);

    const login = () => {
        form.validateFields().then((values) => {
            SysApi.login(values).then((res) => {
                if (HttpResultUtils.isSuccess(res)) {
                    SysStorageUtils.setSecurityKey(res.data.resultData.key);
    
                    SysStorageUtils.setSessionUser({
                        userId: res.data.resultData.userId,
                        userName: res.data.resultData.userName,
                        realName: res.data.resultData.realName,
                        userCode: res.data.resultData.userCode
                    });
    
                    history.push(Environments.getEvnProp('REACT_APP_HOME_ROUTER'));
                    setTimeout(() => {
                        notification.success({
                            message: '欢迎',
                            description: res.data.resultMsg
                        });
                    }, 500);
                } else {
                    HttpResultUtils.failureTipMsg(res);
                }
            });
        })
    }
    return (
        <div className={classes["app-login-container"]}>
            <div className={classes["app-login-inner-container"]}>
                <div className={classes["app-login-box-card"]}>
                    <div className={classes["app-login-flex"]}>
                        <div className={classes["app-login-img"]} />
                        <div className={classes["app-login-form-box"]}>
                            <h3 className={classes["app-login-title"]}>{sysTitle}</h3>
                            <Form
                                className={classes["app-login-form"]}
                                form={form}
                            >
                                <Form.Item
                                    name="userName"
                                    rules={[{
                                        required: true,
                                        min: 6,
                                        max: 15,
                                        message: '用户名格式不正确(6-15位)!'
                                    }]}
                                >
                                    <Input placeholder="请输入用户名！" prefix={<DynamicIcon iconName="UserOutlined" />} />
                                </Form.Item>

                                <Form.Item
                                    name="password"
                                    rules={[{
                                        required: true,
                                        min: 6,
                                        max: 15,
                                        message: '密码格式不正确(6-15位)!'
                                    }]}
                                >
                                    <Input.Password placeholder="请输入密码！" prefix={<DynamicIcon iconName="LockOutlined" />} />
                                </Form.Item>

                                <Form.Item>
                                    <Button type="primary" block onClick={login}>
                                        登录
                                    </Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                    <div className={classes["app-login-copyright"]}>
                        <div className={classes["app-text-center"]}> Copyright 2021 cjh. All Rights Reserved. </div>
                    </div>
                </div>
                <div className={classes["app-login-desc"]}>
                    系统仅支持Edge、Google Chrome、Mozilla
                    Firefox、Safari以及其它主流的浏览器，如您的浏览器无法使用本系统，请更换其它浏览器！
                </div>
            </div>
        </div>
    )
};

export default Login;
